<template>
  <div class="container">
    <div class="search-container">
      <div class="start-time" @click="handleShowSelectedDate(1)">{{ queryParams.startTime }}</div>
      <!--<div class="line">-</div>-->
      <!--<div class="end-time" @click="handleShowSelectedDate(2)">{{ queryParams.endTime }}</div>-->
    </div>
    <div class="list-container">
      <van-pull-refresh v-model="refreshing" v-model:loading="loading" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <div class="record-item" v-for="(item,index) in list" :key="item">
            <div class="record-item-title">{{ item.rq }}</div>
            <div class="log-children">
              <div class="log-row" v-for="(it,i) in item.logsDetailList" :key="i">
                <div class="log-i">{{ i+1 }}</div>
                <div class="log-t">{{{1:'上午',2:'下午',3:'晚上'}[it.rqType]}}:</div>
                <div class="log-c">{{it.workContent}}</div>
              </div>
              <div v-if="!item.logsDetailList || item.logsDetailList.length===0">未填写</div>
            </div>
            <div class="log-summary">
              {{ item.summaryDayWork || '未填写' }}
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-action-sheet v-model:show="show" :title="null">
      <!--<van-date-picker-->
      <!--  v-model="currentDate"-->
      <!--  :columns-type="['year','month']"-->
      <!--  title="选择日期"-->
      <!--  :min-date="minDate"-->
      <!--  :max-date="maxDate"-->
      <!--  @confirm="handleConfirmSelectDate"-->
      <!--  @cancel="handleCancelSelectDate"-->
      <!--/>-->
      <van-date-picker
        v-model="currentDate"
        title="选择年月"
        :max-date="maxDate"
        :columns-type="columnsType"
        @confirm="handleConfirmSelectDate"
        @cancel="handleCancelSelectDate"
      />

    </van-action-sheet>
  </div>
</template>

<script setup>

import { onMounted, reactive, ref, toRaw } from 'vue'
import { delLogsApi, myCompleteLogsApi } from '@/api/workLog.js'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'
import useUserStore from '@/stores/user.js'

const show = ref(false)
const title = ref('选择日期')
const columnsType = ref(['year', 'month'])
const queryParams = reactive({
  startTime: dayjs().format('YYYY-MM'),
  endTime: dayjs().format('YYYY-MM-DD'),
  pageSize: 10000,
  pageNum: 1
})
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const currentDate = ref([dayjs().year(), dayjs().month() - 1])
// const minDate = ref(new Date(dayjs().subtract(1,'year').format('YYYY-MM')))
// const maxDate = ref(new Date(dayjs().format('YYYY-MM')))
const maxDate = ref(new Date(2025, 5, 1))
const dateType = ref(1)
const router = useRouter()
const userStore = useUserStore()


const handleDelRow = (index) => {
  showConfirmDialog({
    title: '提示',
    message: '确认删除吗?'
  })
    .then(() => {

      delLogsApi(list.value[index].id).then(() => {
        list.value.splice(index, 1)
      })
    })
    .catch(() => {
      // on cancel
    })

}
const handleInputLog = (row) => {
  router.push(`/addWorkLog?date=${row.rq}`)
}

const handleConfirmSelectDate = (e) => {
  if (dateType.value === 1) {
    queryParams.startTime = e.selectedValues.join('-')
  } else if (dateType.value === 2) {
    queryParams.endTime = e.selectedValues.join('-')
  }
  queryParams.pageNum = 1
  list.value = []
  show.value = false
  getList()
}
const handleCancelSelectDate = () => {
  show.value = false
}
const handleShowSelectedDate = type => {
  if (type === 1) {
    // 选择开始时间
    title.value = '选择开始日期'
    show.value = true
    // 最小值为本年度第一天
    let t = dayjs(queryParams.startTime)
    currentDate.value = [t.year(), t.month() + 1]
  } else if (type === 2) {
    // 选择结束时间
    title.value = '选择结束日期'
    show.value = true
    currentDate.value = dayjs(queryParams.endTime).format('YYYY-MM-DD').split('-')
  }
}

const getList = () => {

  let params ={
    rq: dayjs(queryParams.startTime).format('YYYY-MM'),
    createBy: userStore.userInfo.userId,
    pageSize: queryParams.pageSize,
    pageNum: queryParams.pageNum
  }
  myCompleteLogsApi(params).then(res => {
    // let arr = res.rows.map(item => {
    //   item.inputStatus = dayjs(item.createTime).isSame(item.rq, 'day') ? '正常' : '补录'
    //   return item
    // })
    // if (refreshing.value) {
    //   list.value = []
    //   refreshing.value = false
    // }
    // list.value = [...list.value, ...arr]
    list.value = [...list.value, ...res.rows]
    loading.value = false
    finished.value = true
    // TODO 后台分页有问题
    // if (res.rows.length ===0) {
    //   finished.value = true
    // } else {
    //   queryParams.pageNum = queryParams.pageNum + 1
    // }
  })
}

const onRefresh = () => {
  list.value = []
  // 清空列表数据
  finished.value = false
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  refreshing.value = false
  getList()
}
const init = () => {
  // getList()
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100%;

  .search-container {
    width: 100%;
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .start-time, .end-time {
      width: 30%;
      text-align: center;
    }
  }

  .list-container {
    margin-top: 10px;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}

.record-item {
  width: calc(100% - 20px);
  background-color: #fff;
  margin: 0 10px 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .record-item-title {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #f2f2f2;
    font-weight: bold;
  }

  .log-children {
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    .log-row{
      margin-bottom: 5px;
      display: flex;
      line-height: 20px;
      .log-i{
        width: 20px;
        height: 20px;
        background-color: #f2f2f2;
        text-align: center;
      }
      .log-t{
        width: 40px;
        text-align: center;
      }
      .log-c{
        width: calc(100% - 70px);
      }
    }
  }

  .log-summary {
    padding: 10px;
  }
}

.date-picker-box {
  height: 500px;
}
</style>
